<template>
  <div class="bodySys">
    <div class="head">
      <div class="titleBar">
        <div class="log">
          <img v-if="logo" :src="logo" class="sidebar-logo" />
        </div>
        <div>
          {{ title }}
        </div>

      </div>
      <div class="user">
        <div>{{ realName }}</div>
        <div>你好</div>
      </div>
    </div>
    <div class="sep">

    </div>
    <div class="hub">
      <div class="sys" v-for="(system,index) in systems" :key="index">
        <div @click="onEnterSystem(system)">{{ system.funcName }}</div>
      </div>
    </div>

    <div class="board"></div>
  </div>
</template>

<script>
import { getSysAccs } from "@/api/system/user";
import { setSystem, setSystemId } from '@/utils/auth'
import store from "@/store";
import logoImg from '@/assets/logo/logo.png'

export default {
  name: "sysHub",
  data () {
    return {
      systems: [], // 用户可访问的系统
      realName: this.$store.state.user.realName,
      logo: logoImg,// undefined,
      title: process.env.VUE_APP_TITLE,
    };
  },
  mounted () {
    this.handleSysAccs();
  },
  methods: {
    handleSysAccs () {
      getSysAccs().then((res) => {
        this.systems = res.data;
      })
    },
    onEnterSystem (system) {
      debugger
      setSystem(system.perms)
      setSystemId(system.pkId)

      if (system.isFrame == '1') {//外联  客服系统的处理
        //window.location.href = system.funcPath;
        //window.open(system.funcPath, '_blank');
        debugger;
        var protocol = window.location.protocol;
        var hostname = window.location.hostname;
        var port = window.location.port;//?window.location.port:'80';
        //let url=protocol+"//"+hostname+":"+port+system.funcPath
        let url = protocol + "//" + hostname
        if (port) {
          url = url + ":" + port
        }
        url = url + system.funcPath

        window.open(url, '_blank');

      } else {
        this.$store.dispatch("UpdateCurSys", system).then(() => {
          window.open("index", '_blank');
          //this.$router.push({ path: "/" }).catch(()=>{});
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.bodySys {
  padding: 10px;
  width: 100%;

  .head {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    align-items: center;

    .titleBar {
      font-size: 24px;
      display: flex;

      .sidebar-logo {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        margin-right: 12px;
      }
    }

    .user {
      display: flex;
      gap: 5px;
      text-align: right;
    }
  }

  .sep {
    background-color: #1c84c6;
    height: 10px;
    margin-bottom: 10px;
  }


  .hub {
    display: flex;
    gap: 20px;

    .sys {
      padding: 10px 40px;
      background-color: #1c84c6;
      color: #fff;
      cursor: pointer;
      font-size: 24px;
    }
  }

}


</style>
